<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="todo-list-example">
        <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
        <ul>
            <li is="todo-item"
                v-for="(todo,index) in todos"
                v-bind:key="todo"
                v-bind:title="todo"
                v-on:remove="todos.splice(index, 1)"></li>
        </ul>
    </div>

    <script>
//        定义一个组件
        Vue.component('todo-item',{
            template: '<li>{{title}} <button v-on:click="$emit(remove)">X</button></li>',
            props:['title']
        });

        new Vue({
            el:'#todo-list-example',
            data:{
                newTodoText:'',
                todos:[
                    'Do the dishes',
                    'Take out the trash',
                    'Mow the lawn'
                ]
            },
            methods:{
                addNewTodo:function () {
                    this.todos.push(this.newTodoText);
                    this.newTodoText=''
                }
            }
        })


    </script>
</body>
</html>